<route lang="json5">
{
  style: {
    navigationBarTitleText: '订单列表',
  },
}
</route>
<template>
  <view class="order p-4">
    <z-paging
      ref="paging"
      autoShowBackToTop
      bg-color="#FAFAFAFF"
      cell-height-mode="dynamic"
      class="order-list"
      :auto="false"
      use-virtual-list
      @query="queryList"
    >
      <template #top>
        <wd-tabs
          ref="tabs"
          :list="tabList"
          v-model="current"
          @change="tabsChange"
          custom-class="border-b-1 border-gray-200 border-b-solid"
        >
          <wd-tab
            v-for="(item, index) in tabList"
            :key="index"
            :title="item.name"
            @change="tabsChange"
          ></wd-tab>
        </wd-tabs>
      </template>
      <!-- 其余代码保持不变 -->
      <template #cell="{ item }">
        <div
          class="order-item p-4 rounded-xl bg-white shadow-sport hover:shadow-xl transition-all duration-300 mt-4 mx-4 border-l-4"
          :class="[getStatusBorder(item.orderStatusStr)]"
          @tap="routerOrderDetailsPath(item.orderPayNo)"
        >
          <!-- Header -->
          <div class="flex justify-between items-start mb-3">
            <div class="flex-1 min-w-0">
              <h3 class="text-lg font-bold text-gray-800 truncate">
                <span
                  :class="[
                    getStatusIcon(item.orderStatusStr).color,
                    getStatusIcon(item.orderStatusStr).icon,
                  ]"
                  class="mr-2"
                ></span>
                {{ item.orderName }}
              </h3>
            </div>
            <div class="flex pl-2">
              <span class="text-xs mt-1" :class="getStatusBadge(item.orderStatusStr)">
                {{ getStatusText(item.orderStatusStr) }}
              </span>
            </div>
          </div>

          <!-- Info Grid -->
          <div class="grid grid-cols-2 gap-3 py-2">
            <div class="col-span-2">
              <div class="flex items-center bg-gray-50 rounded-lg p-2">
                <span class="i-carbon:qr-code text-lg text-gray-500 mr-2" />
                <div class="flex-1 min-w-0">
                  <p class="text-xs font-mono text-gray-600 truncate">{{ item.orderPayNo }}</p>
                  <p class="text-2xs text-gray-400 mt-1">点击右侧复制</p>
                </div>
                <span
                  class="i-carbon:copy text-gray-400 active:scale-95 transition-transform"
                  @tap.stop="copyOrderNo(item.orderPayNo)"
                />
              </div>
            </div>

            <div class="flex items-center p-2 bg-gradient-to-r from-gray-50 to-white rounded-lg">
              <span class="i-carbon:calendar text-blue-400 mr-2" />
              <div>
                <p class="text-xs font-medium text-gray-700">创建时间</p>
                <p class="text-2xs text-gray-500">{{ formatDate(item.createTime) }}</p>
              </div>
            </div>

            <div class="flex items-center p-2 bg-gradient-to-r from-gray-50 to-white rounded-lg">
              <span class="i-carbon:money text-green-400 mr-2" />
              <div>
                <p class="text-xs font-medium text-gray-700">金额</p>
                <p class="text-2xs text-gray-500">
                  ¥{{ currency(item.orderActualMoney).divide(100) }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </template>
    </z-paging>
  </view>
</template>

<script lang="ts" setup>
import { tbOrderPage } from '@/service/index/order'
import dayjs from 'dayjs'
import currency from 'currency.js'
import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'
const { userInfo } = storeToRefs(useUserStore())
// tabs头部
const tabList = [
  {
    name: '全部',
    value: [],
  },
  {
    name: '待支付',
    value: [1],
  },
  {
    name: '已完成',
    value: [2],
  },
]

// 列表实例
const paging = ref(null)

// 订单列表
const orderList = ref([])

// 当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
const tabsChange = (params) => {
  orderParams.payStatus = tabList[params.index].value.join(',')
  paging.value.reload()
}

const orderParams = reactive({
  current: 1, // 当前页
  orderName: '', // 订单名称
  payStatus: '', // 支付状态
  payTime: '', // 支付时间 筛选时传递(YYYYMMDD)
  size: 10, // 大小
  usrId: userInfo.value.id, // 用户ID
})

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = (current, size) => {
  // 加载loading
  uni.showLoading({
    title: '订单加载中...',
    mask: true,
  })
  tbOrderPage({
    ...orderParams,
    current,
    size,
    usrId: userInfo.value.id, // 用户ID
  })
    .then(({ code, data }) => {
      if (code === 0) {
        orderList.value = data.list
        // 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
        paging.value.complete(data.list)
      }
    })
    .catch(() => {
      paging.value.complete([])
    })
    .finally(() => {
      uni.hideLoading()
    })
}

// 路由跳转
const routerOrderDetailsPath = (id) => {
  uni.navigateTo({ url: `/pages/order/details?id=${id}` })
}

const current = ref(0)

const getStatusText = (status) => {
  switch (status) {
    case '1':
      return '待支付'
    case '2':
      return '已完成'
    case '3':
      return '待评价'
    case '4':
      return '退货'
    case '5':
      return '售后'
    case '6':
      return '已完成'
    case '7':
      return '待评价'
    default:
      return '未知状态'
  }
}

// 在原有状态处理函数后添加图标映射
const getStatusIcon = (status) => {
  switch (status) {
    case 1: // 待支付
      return { icon: 'i-carbon:time', color: 'text-orange-500' }
    case 2: // 已完成
      return { icon: 'i-carbon:checkmark-filled', color: 'text-green-500' }
    case 3: // 待评价
      return { icon: 'i-carbon:chat', color: 'text-blue-500' }
    case 4: // 退货
      return { icon: 'i-carbon:return', color: 'text-red-500' }
    case 5: // 售后
      return { icon: 'i-carbon:service-desk', color: 'text-purple-500' }
    case 6: // 已完成
      return { icon: 'i-carbon:trophy-filled', color: 'text-green-600' }
    case 7: // 待评价
      return { icon: 'i-carbon:review', color: 'text-yellow-500' }
    default:
      return { icon: 'i-carbon:unknown', color: 'text-gray-500' }
  }
}

// 新增状态样式方法
const getStatusBorder = (status) => {
  const map = {
    1: 'border-orange-400', // 待支付
    2: 'border-green-400', // 已完成
    3: 'border-blue-400', // 待评价
    4: 'border-red-400', // 退货
    5: 'border-purple-400', // 售后
    6: 'border-green-600', // 已完成
    7: 'border-yellow-400', // 待评价
  }
  return map[status] || 'border-gray-400'
}

const getStatusBadge = (status) => {
  return (
    {
      1: 'bg-orange-100 text-orange-700',
      2: 'bg-green-100 text-green-700',
      3: 'bg-blue-100 text-blue-700',
      4: 'bg-red-100 text-red-700',
      5: 'bg-purple-100 text-purple-700',
      6: 'bg-green-100 text-green-700',
      7: 'bg-yellow-100 text-yellow-700',
    }[status] + ' px-2 py-1 rounded-full text-xs'
  )
}

const copyOrderNo = (orderNo) => {
  uni.setClipboardData({
    data: orderNo, // e是你要保存的内容
    success: function () {
      uni.showToast({
        title: '订单复制成功',
        icon: 'none',
      })
    },
  })
}

const formatDate = (dateStr) => {
  return dayjs(dateStr, 'YYYYMMDD').format('MM/DD ddd')
}
onShow(() => {
  if (!userInfo.value.id) {
    uni.navigateTo({ url: `/pages/login/login` })
    return
  }
  nextTick(() => {
    paging.value.reload()
  })
})
</script>

<style lang="scss"></style>
